<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0px;padding: 0px;}
        body{background-color: bisque;}
        :root{--s:200px;}
        .css-s{width: 900px;height: 300px;margin: 50px auto;display: flex;align-items: center;justify-content: space-evenly;border: 1px solid blueviolet;box-sizing: border-box;}
        .css-1 img{
            --b: 18px;
            --g: 14px;
            --c: #4ECDC4;
            width: var(--s);
            aspect-ratio: 1;            
            object-fit: cover;
            outline: #0009 solid calc(var(--s) /2);
            outline-offset: calc(var(--s)/-2);
            cursor: pointer;
            -webkit-transition: .3s;
            transition: .3s;
        }
        .css-1 img:first-child:hover{
            outline: var(--b) solid var(--c);
            outline-offset: var(--g);
        }
        .css-1 img:last-child{
            width: 260px;
            border-radius: 50px;
            aspect-ratio: 16/9;
            outline: 100vmax solid rgb(0 0 0/var(--_o,50%));
            outline-offset: -100vmax;
            -webkit-mask: linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0);
            cursor: pointer;
            transition: outline-color .8s;
        }
        .css-1 img:nth-child(2):hover{
            --_o: 0%
        }

        .css-2 img:first-child{
            width: 280px;
            aspect-ratio: 1;
            object-fit: cover;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            outline: 100vmax solid #fff220;
            outline-offset: -100vmax;
            transition: .7s;
            cursor: pointer;
        }
        .css-2 img:first-child:hover{
            outline-color: #0000;

        }
        @supports not (-webkit-mask-box-image:var(--_m)){
            img{
                --_m:
                radial-gradient(circle at 60% 63%,#000 64%,#0000 65%) top left /50% 50% no-repeat,
                radial-gradient(circle at 40% 63%,#000 64%,#0000 65%) top right/50% 50% no-repeat,
                linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
                -webkit-mask: var(--_m);
                        mask: var(--_m);
            }
        }
        .css-2 img:last-child{
            width: 280px;
            aspect-ratio: 1;
            object-fit: cover;
            --_m:radial-gradient(#000 69%,#0000 70%) 84.5% fill/100%;
            -webkit-mask-box-image: var(--_m);
            mask-border: var(--_m);
            clip-path: polygon(-41% 0,50% 91%,141% 0);
            outline: 100vmax solid #ff3e60;
            outline-offset: -100vmax;
            transition: .7s;
            cursor: pointer;
        }
        .css-2 img:last-child:hover{
            outline-color: #0000;
        }

        .css-3 img{
            width: 240px;
            aspect-ratio: 1;
            object-fit: cover;
        }
        .css-3 img:first-child{
            --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
            --m:
                left    var(--_i,0%) top    var(--_g),
                bottom  var(--_i,0%) left   var(--_g),
                top     var(--_i,0%) right  var(--_g),
                right   var(--_i,0%) bottom var(--_g);
            -webkit-mask: var(--m);
                    mask: var(--m);
            outline: 100vmax solid #00b4ff;
            outline-offset: -100vmax;
            -webkit-transition: .3s linear;
            transition: .3s linear;
            cursor: pointer;
        }
        .css-3 img:first-child:hover{
            --_i: 10%;
            outline-color: #0000;
        }
        .css-3 img:nth-child(2){
            --b: 6px;
            --g: 12px;
            --c: #AB3E5B;
            width: 120px;
            
            padding: calc(var(--b) + var(--g));
            --_c: conic-gradient(at var(--b) calc(100% - var(--b)),#0000 25%,var(--c) 0);
            --_p: 200% var(--_i,var(--b)) no-repeat;
            background:
                conic-gradient(from 180deg at calc(100% - var(--b)) var(--b),#0000 25%,var(--c) 0)
                var(--_i,200%) 0/var(--_p), var(--_c);
            --_m:
                var(--_c) calc(var(--_i,0%) - 100%) 100%/var(--_p),
                conic-gradient(at var(--b) calc(100% - var(--b)),#000 25%,#0000 0);
            -webkit-mask: var(--_m);
                    mask: var(--_m);
            outline: 100vmax solid var(--c);
            outline-offset: -100vmax;
            clip-path: inset(calc(2*(var(--b) + var(--g))));
            transition: 
                .3s clip-path, 
                .3s outline-color,
                .3s transform;
            cursor: pointer;
        }
        .css-3 img:nth-child(2):hover{
            --_i: 100%;
            --_t: 0s;
            clip-path: inset(0);
            outline-color: #0000;
            transform: scale(1.2);
            transition: 
                .25s 1s -webkit-mask-size, 
                .25s .75s -webkit-mask-position, 
                .25s .5s background-size,
                .25s .25s background-position,
                .25s clip-path, 
                .25s outline-color,
                .7s transform;
        }
        .css-3 img:last-child{
            border-radius: 50%;
            cursor: pointer;
            padding: 25px;
            clip-path: circle(50% - 40px);
            --_p: 100px;
            --_g1: radial-gradient(50% 50%,#e71e24 90%,#0000);
            --_g2: radial-gradient(50% 50%,#fcc010 90%,#0000);
            --_g3: radial-gradient(50% 50%,#85c341 90%,#0000);
            --_g4: radial-gradient(50% 50%,#eb2288 90%,#0000); 
            background:
                var(--_g1) calc(20% - var(--_p)) calc(20% - var(--_p)),
                var(--_g2) calc(80% + var(--_p)) calc(8%  - var(--_p)),
                var(--_g3) calc(88% + var(--_p)) calc(82% + var(--_p)),
                var(--_g3) 55%                   calc(8% - var(--_p)),
                var(--_g1) calc(18% - var(--_p)) calc(91% + var(--_p)),
                var(--_g2) calc(10% - var(--_p)) calc(70% + var(--_p)),
                var(--_g2) calc(95% + var(--_p)) 40%,
                var(--_g1) calc(82% + var(--_p)) calc(28% - var(--_p)),
                var(--_g4) calc(12% - var(--_p)) 30%,
                var(--_g4) 65%                   calc(94% + var(--_p)),
                var(--_g3) calc(20% - var(--_p)) calc(10% - var(--_p)),
                var(--_g4) calc(42% - var(--_p)) calc(91% + var(--_p));
            background-size: 15px 15px, 20px 20px, 30px 30px;
            background-repeat: no-repeat;
            outline: 120px solid #0005;
            outline-offset: -160px;
            transition: .5s;
        }
        .css-3 img:last-child:hover{
            clip-path: circle(80%);
            outline: 3px solid #EF746F;
            outline-offset: 0;
            --_p: 0px;
        }

        .css-4 img{
            width: 240px;
            aspect-ratio: 1;
            object-fit: cover;
        }
        .css-4 img:first-child{
            --s: 15px;
            --b: 2px;  
            --w: 200px;
            --c: #7B3B3B;
            
            width: var(--w);
            aspect-ratio: 1;
            object-fit: cover;
            padding: calc(2*var(--s));
            --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
            background:
                linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
                linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
            outline: calc(var(--w)/2) solid #0009;
            outline-offset: calc(var(--w)/-2 - 2*var(--s));
            transition: .4s;
            cursor: pointer;
        }
        .css-4 img:first-child:hover{
            outline: var(--b) solid var(--c);
            outline-offset: calc(var(--s)/-2);
            --_i: calc(100% - 2*var(--s));
        }
        .css-4 img:nth-child(2){
            --s: 10px;
            --b: 2px;
            --w: 200px;
            --c: #7B3B3B;
            
            width: var(--w);
            aspect-ratio: 1;
            object-fit: cover;
            padding: var(--s);
            --_g: #0000 25%,var(--c) 0;
            background:
                conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0,
                conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0,
                conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100%,
                conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100%;
            background-size: 15% 15%; 
            background-repeat: no-repeat;
            outline: calc(var(--w)/2) solid #0009;
            outline-offset: calc(var(--w)/-2 - var(--s));
            clip-path: inset(var(--s));
            transition: .4s;
            cursor: pointer;
        }
        .css-4 img:nth-child(2):hover{
            outline: var(--b) solid var(--c);
            outline-offset: var(--s);
            clip-path: inset(calc(-1*var(--s) - var(--b)));
            background-size: 45% 45%;
            transition: linear .3s, background-size .3s .4s;
        }
        .css-4 img:last-child{
            --s: 16px;
            --b: 6px;
            --w: 250px;
            --c: #BF4D28;
  
            width: var(--w);
            aspect-ratio: 1;
            object-fit: cover;
            padding: var(--s);
            --_g: #0000 25%,var(--c) 0;
            background:
                conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 
                var(--_p,-5%) var(--_p,-5%),
                conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 
                calc(100% - var(--_p,-5%)) var(--_p,-5%),
                conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 
                var(--_p,-5%) calc(100% - var(--_p,-5%)),
                conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 
                calc(100% - var(--_p,-5%)) calc(100% - var(--_p,-5%));
            background-size: 20% 20%; 
            background-repeat: no-repeat;
            outline: calc(var(--w)/2) solid #0005;
            outline-offset: calc(var(--w)/-2 - var(--s));
            clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
            transition: .4s;
            cursor: pointer;
        }
        .css-4 img:last-child:hover{
            outline-offset: 2px;
            clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            --_p: calc(var(--s)/4);
            transition:  .3s, background-position .3s .35s;
        }
    </style>
</head>
<body>
    <div class="css-s css-1">
        <img src="../images/hunluo.png" alt="" ">
        <img src="../images/hunluo.png" alt="">
    </div>

    <div class="css-s css-2">
        <img src="../images/back.jpg" alt="">
        <img src="../images/back2.jpg" alt="">
    </div>

    <div class="css-s css-3">
        <img src="../images/back2.jpg" alt="">
        <img src="../images/back.jpg" alt="">
        <img src="../images/back2.jpg" alt="">
    </div>

    <div class="css-s css-4">
        <img src="../images/back2.jpg" alt="">
        <img src="../images/back.jpg" alt="">
        <img src="../images/back2.jpg" alt="">
    </div>
</body>
</html>